<template>
  <div class="main-container">
    <div class="form-container">
      <el-steps style="max-width: 600px ;margin: 0 auto;"  :active="0" finish-status="success" align-center>
        <el-step title="选择编号" description="选择出差编号" />
        <el-step title="提交报销" description="提交报销申请" />
        <el-step title="报销申请完成" description="Success" />
      </el-steps>
      <el-divider />
      <div style="font-size: 25px; color: #009dff; font-weight: bolder; width: 100%; text-align:center; margin: 0 0 20px 0">选择出差编号</div>
      <!-- 遍历 tableData 数组，为每个元素创建一个 el-descriptions 组件 -->
      <!-- 使用 v-for 遍历 tableData 数组，为每个元素创建一个 el-card -->
      <!-- 遍历 tableData 数组，为每个元素创建一个 el-descriptions 组件 -->

      <el-card v-for="(item, index) in tableData" :key="index" class="card" shadow="hover">
        <el-descriptions :column="2" class="descriptions" span="4">
          <!-- 第一行：编号和描述 -->
          <el-descriptions-item span="1">
            <template #label>
              <div class="cell-item">
                出差编号
              </div>
            </template>
            {{ item.travelId }}
          </el-descriptions-item>
          <el-descriptions-item span="3">
            <template #label>
              <div class="cell-item">
                出差缘由
              </div>
            </template>
            {{ item.travelReason }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions :column="4" class="descriptions">
          <!-- 第二行：各种费用 -->
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                食品费
              </div>
            </template>
            {{ item.foodCost }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                交通费
              </div>
            </template>
            {{ item.transportCost }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                旅费
              </div>
            </template>
            {{ item.hotelCost }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                预支款
              </div>
            </template>
            {{ item.advancePayment }}
          </el-descriptions-item>
        </el-descriptions>
        <!-- 第三行：操作按钮 -->
        <el-descriptions :column="1" class="operation-container">
          <el-descriptions-item  class="operation-item" style="text-align: right;">
            <el-button type="primary" size="small" @click="handleClick(item.travelId)">报销</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<script  setup>
import {getCurrentInstance, onMounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import {useUserStore} from "@/store/User.js";
const router = useRouter()
// 创建一个响应式的数据变量来存储表格数据
const active = ref(0)
const tableData = ref([])
const userStore = useUserStore();
const { proxy } = getCurrentInstance();
tableData.value = [
]
// 修改 handleClick 函数，使其接收 travelId 作为参数
const handleClick = (travelId) => {
  console.log("TravelId:", travelId) // 确保 travelId 被正确传递
  router.push({
    path:'/Reimbursement/SubmitReimbursement',
    query: { travelId,active: 1 }
  })
}
// 通过 onMounted 钩子请求数据
onMounted(async () => {
  console.log(userStore.getUser().userId);
  let result = await proxy.Request({
    url: proxy.Api.getFinalTravelListByUserId,
    params: {
      userId: userStore.getUser().userId,
    },
  });
  tableData.value = result.data;
  console.log(tableData)
})
</script>
<style scoped>
.main-container{
  width: 100%;
}

.form-container{
  width: 1000px;
  margin: 10px auto auto;
  padding: 2% 5%;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -moz-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
}
/* 调整表格整体字体大小和行高 */
.custom-table {
  font-size: 20px; /* 设置字体大小 */
}

/* 调整每行的高度 */
.custom-table .el-table__row {
  height: 50px; /* 设置行高 */
}

/* 调整表头字体大小 */
.custom-table .el-table__header {
  font-size: 16px; /* 设置表头字体大小 */
}

/* 如果需要调整单元格字体大小 */
.custom-table .el-table__cell {
  font-size: 14px; /* 设置单元格字体大小 */
}

/* 可选：设置单元格的垂直对齐方式 */
.custom-table .el-table__cell {
  line-height: 50px; /* 设置行内内容的垂直居中对齐 */
}

.button{
  margin: 0 auto;
}

/* 每个卡片 */
.card {
  margin-bottom: 20px;
  padding: 10px;
}

/* 每一行的描述项布局 */
.descriptions {
  margin-bottom: 10px;
}

.el-descriptions-item {
  /* 设置描述项的高度，确保第一行和第二行对齐 */
  display: flex;
  align-items: center;
}

/* 自定义label部分的样式 */
.cell-item {
  background-color: #f0f0f0; /* 灰色背景 */
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
  color: #333;
}

/* 操作按钮右对齐 */
.operation-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.operation-item {
  /* 你可以调整操作项的间距 */
  margin-right: 20px;
}
</style>
